[想試試看JavaScript ] 事件處理

13th鐵人賽

夯特

2021-09-17 18:05:46

1493 瀏覽

分享至

事件處理

事件處理就是當使用者對畫面做了一個動作，我們的程式必須偵測這個動作，並且做出反應。
如果事件沒有被觸發，也就是使用者沒有動作，程式就不會有任何反應。
例如，加入購物車按紐，在我按下按鈕後就會反應並將商品加入購物車。
另外，如果我沒有按下按鈕的話，就不會有任何商品被加入購物車。

click 事件

click 事件就是用滑鼠點擊會有反應的事件
範例，HTML 程式碼

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
</body>
</html>

這樣就是一個基本的事件處理，我按下 Click 的話就會跳出警告視窗，顯示 click。
alert('click') 這裡面用單引號，因為 onclick="" 已經使用了雙引號，為了讓程式可以順利的閱讀，所以 alert 使用單引號將字串包括住。

mouseover mouseout 事件

上面嘗試了 click 事件
現在來寫寫 mouseover 與 mouseout 事件
mouseover 在滑鼠移動進目標元素會觸發
mouseout 在滑鼠移動出目標元素會觸發

<html>
<head>
<script>

</script>
</head>
<body>
    <button onclick="alert('click');">Click</button>
    <span onmouseover="this.style.color='red';"
    onmouseout="this.style.color='black';">test</span>
</body>
</html>

mouseover 觸發就執行 this.style.color='red'; 這段程式，將文字改成紅色
mouseout 觸發就執行 this.style.color='black'; 這段程式，將文字改成黑色
style.color 是 DOM 提供的屬性，可以控制元素的文字顏色。

註冊事件的方法

事件處理，並不會一載入 Javascript 程式碼就馬上執行，而是會等使用者觸發事件後，才會運作裡面的程式。
所以我們會註冊事件監聽器，等使用者觸發事件就執行。
也就是，我們一樣要預先設定一段程式碼，這些程式碼會一直等待，只要使用者觸發事件就會馬上執行。
例如，我希望按下按鈕就會跳出訊息，我會註冊 click 事件

<button onclick="alert('click');">Click</button>

接著 onclick 屬性的程式碼就會一直等待，只要使用者點了就馬上執行 alert('click')

那麼註冊事件的方法有三種

HTML 屬性

寫在 HTML 上面，透過 on+事件名 的屬性來註冊
範例：

<button onclick="alert('click');">Click</button>

使用 onclick 屬性，在標籤註冊 click 事件

DOM API 屬性

寫在 Javascript 裡，使用 HTML DOM 提供的方法註冊
要操作的目標.on+事件名=要執行的函式
範例:

<script>
window.onclick=function(){
   alert('click');
}
</script>

我在標籤註冊了 click 事件，只要點擊到瀏覽器的外框就會啟動

如果我註冊在標籤的話，因為畫面中可以有很多個標籤，要先讓瀏覽器知道我註冊在哪個標籤
所以要使用 DOM 裡的 getElementById()，得到我想操作的標籤

我給一個 id 屬性叫 btn
在小括弧寫我想操作的標籤 id 的值，document.getElementById("btn")，並將得到的標籤放進變數
用 on+事件名 註冊事件，並將要執行的函式放進去

<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 標籤放進變數 btn 裡
btn.onclick=function(){  // 註冊事件，並將要執行的函式放進去
    alert('click');
}
</script>
</body>

addEventListener

使用事件監聽器註冊
寫在 Javascript 裡，使用 addEventistener()，語法如下

要操作的目標.addEventListener(事件名稱,事件的處理器,是否為捕獲模式)

範例:

<body>
    <button id="btn">Click</button>
<script>
var btn=document.getElementById("btn");
btn.addEventListener('click',function(){ alert('click') },false)
</script>
</body>

這樣 button 按下去之後一樣可以跳出警告視窗

為什麼註冊事件要有三種不同的寫法呢？ HTML 屬性、DOM 屬性、addEventLitener()
這三種有什麼差異?
寫的順序還需要注意什麼?
就請參考下一篇吧^^